<template>
	<view class="sex-container" style="background-color: transparent;">
		<view class="flex-around">
			<view class="ss-box">
				<image :src="currentIndex==1?ml_male_selected:ml_male" mode=""
					:class="['select-male', {selected: currentIndex == 1}]" @click="selectIndex(1)"></image>
				<view class="ss-sex flex-vc">
					<image :src="currentIndex==1?ml_ss_a_y:ml_ss_a_n" mode="" class="select-optn"
						@click="selectIndex(1)">
					</image>
					男生
				</view>
			</view>
			<view class="ss-box">
				<image :src="currentIndex==2?ml_fmale_selected:ml_fmale" mode=""
					:class="['select-male', {selected: currentIndex == 2}]" @click="selectIndex(2)"></image>
				<view class="ss-sex flex-vc">
					<image :src="currentIndex==2?ml_ss_b_y:ml_ss_b_n" mode="" class="select-optn"
						@click="selectIndex(2)">
					</image>
					女生
				</view>

			</view>
		</view>
		<image class="next" :src="nextImg" @click="next" />
	</view>
</template>

<script>
	export default {
		props: {
			maiLunSex: {
				type: Number,
				default: 0,
				required: false
			}
		},
		data() {
			return {
				currentIndex: 0,
				ml_ss_b_y: this.$imgWxkjUrl + '/product/sex/ml_ss_b_y_new.png',
				ml_ss_b_n: this.$imgWxkjUrl + '/product/sex/ml_ss_b_n_new.png',
				ml_ss_a_y: this.$imgWxkjUrl + '/product/sex/ml_ss_a_y_new.png',
				ml_ss_a_n: this.$imgWxkjUrl + '/product/sex/ml_ss_a_n_new.png',
				ml_male: this.$imgWxkjUrl + '/product/sex/ml_male_2.png',
				ml_male_selected: this.$imgWxkjUrl + '/product/sex/ml_male_selected.png',
				ml_fmale: this.$imgWxkjUrl + '/product/sex/ml_fmale_2.png',
				ml_fmale_selected: this.$imgWxkjUrl + '/product/sex/ml_fmale_selected.png',
				nextImg: this.$imgWxkjUrl + '/product/sex/next_new.png'
			}
		},
		watch: {
			maiLunSex: {
				immediate: true,
				handler(val) {
					this.currentIndex = val
				}
			}
		},
		methods: {
			selectIndex(currentIndex) {
				// if (this.$fangBaoClick()) return
				this.currentIndex = currentIndex;
				this.$emit('selectMaiLunSex', this.currentIndex)
			},
			next() {
				// if (this.$fangBaoClick()) return
				if (this.currentIndex <= 0) {
					this.$showToast('请选择您的性别')
					return
				}
				this.$emit('selectMaiLunSex', this.currentIndex)
			}
		}
	}
</script>

<style lang="scss">
	.ss-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.select-male {
		width: 310rpx;
		height: 770rpx;
	}

	.ss-sex {
		width: 100%;
		padding-top: 30rpx;
		padding-left: 64rpx;
		box-sizing: border-box;
		font-size: 40rpx;
		color: #242974;
	}

	.select-optn {
		width: 84rpx;
		height: 84rpx;
		margin-right: 35rpx;
	}

	.ml-start-test {
		width: 600rpx;
		height: 150rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 120rpx;
	}

	.next {
		width: 330rpx;
		height: 146rpx;
		margin: 60rpx auto 0;
		display: block;
	}
</style>